<template>
  <div class="backGround">
    <van-image width="100%" height="200" lazy-load :src="img" />
    <div class="user">
      <div class="img">
        <img src="@/assets/avatar.png" class="picture" />
        <p class="img-tittle" ref="myTittle">游客</p>
        <button class="btn" @click="btn">{{ btnname }}</button>
        <p v-show="showGreep" class="redact">编辑资料 ></p>
      </div>
    </div>
    <van-grid :column-num="3" icon-size="22px" :border="false" gutter="15px">
      <van-grid-item icon="star-o" text="我的收藏" />
      <van-grid-item icon="wap-home-o" text="我的出租" />
      <van-grid-item icon="underway-o" text="看房记录" />
      <van-grid-item icon="vip-card-o" text="成为房主" />
      <van-grid-item icon="contact" text="个人资料" />
      <van-grid-item icon="service-o" text="联系我们" />
    </van-grid>
    <div class="picu">
      <img src="@/assets/join.png" />
    </div>
  </div>
</template>

<script>
import { useGetitem } from '@/api/user'
import { Dialog } from 'vant'
export default {
  name: 'HmMy',
  components: {},
  props: {},
  data() {
    return {
      showGreep: false,
      img: localStorage.getItem('my-token-vant-mobile')
        ? 'http://liufusong.top:8080/img/avatar.png'
        : 'http://liufusong.top:8080/img/profile/bg.png',
      btnname: localStorage.getItem('my-token-vant-mobile') ? '退出' : '去登录'
    }
  },
  computed: {},
  watch: {},
  async created() {
    const data = await useGetitem()
    console.log(data)
    if (data.status === 200) {
      this.showGreep = true
      this.$nextTick(() => {
        this.$refs.myTittle.innerHTML = data.body.nickname
      })
    }
  },
  methods: {
    btn() {
      Dialog.confirm({
        title: '标题',
        message: '弹窗内容'
      })
        .then(() => {
          console.log(1)
          this.$router.push('/HmLogin')
          // on close
        })
        .catch(() => {
          Dialog.close()
        })
    }
  }
}
</script>

<style scoped lang="less">
.user {
  transform: translateX(-50%);
  position: absolute;
  left: 50%;
  top: 100px;
  width: 320px;
  height: 148px;
  background-color: white;
  box-shadow: 0 0 15px 2px #ccc;
  .img {
    z-index: 999999999;
    border: 5px solid white;
    border-radius: 50%;
    position: relative;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    .picture {
      width: 100%;
      height: 100%;
    }
    .img-tittle {
      margin-left: 20px;
      color: black;
      font-size: 10px;
    }
    .btn {
      margin-top: 5px;
      border-radius: 12%;
      border: none;
      color: #fff;
      font-size: 12px;
      background-color: #21b97a;
      width: 65px;
      height: 28px;
    }
    .redact {
      font-size: 9px;
      margin-left: 7px;
    }
  }
}
.picu {
  width: 90%;
  height: 85px;
  margin: 0 auto;
  padding-top: 20px;
  img {
    width: 100%;
    height: 100%;
  }
}
/deep/.van-grid {
  margin-top: 80px;
}
</style>
